@charset "utf-8";
/* CSS Document */

/* .module {
    position: absolute;
    cursor: pointer;
    border: 1px dashed #0F0;
    visibility: hidden;
    z-index: 1;
} */

/* .title {
    position: absolute;
    top: 100%;
    height: 0px;
    font-size: 12px;
    width: 100%;
    text-align: center;
    visibility: visible;
    z-index: 1;
} */

/* .content {
    visibility: visible;
    z-index: 1;
    display: table-cell;
    vertical-align: middle;
} 

.content img {
    vertical-align: middle;
}
*/

/*缩放控制点*/
/* .top_left {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: nw-resize;
    z-index: 1;
} */

/* .top_right {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: ne-resize;
    z-index: 1;
} */

/* .middle_left {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: w-resize;
    z-index: 1;
} */

/* .middle_right {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: w-resize;
    z-index: 1;
} */
/* 
.bottom_left {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: sw-resize;
    z-index: 1;
}
 */
/* .bottom_right {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: nw-resize;
    z-index: 1;
} */

/* .scaling {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: nw-resize;
    z-index: 1;
} */

/* .hidden {
    width: 400px;
    height: 400px;
    background-color: #030;
    z-index: 1;
} */

.topo-fullscreen {
	/*
	background: url() center no-repeat;
    */
    background: url() center no-repeat;
	cursor: pointer;
    height: 40px;
    width: 25px;
    float: right;
    right:0.8rem;
    position: absolute;
    background-size: contain;
    z-index: 9;
    display: none;
}
.topo-nofullscreen{
	cursor: pointer;
    height: 2rem;
    width: 1.7rem;
    float: right;
    right:0.8rem;
    position: absolute;
    background-size: contain;
    background: url() center no-repeat;
    background-size: 100%;
    z-index: 3;
}

.link-icon-style, .node-icon-style {
    /* cursor: pointer; */
    width: 30px;
    height: 30px;
}

.right-click-menu {
    position: absolute;
    width: 180px;
    display: none;
    background-color: #FFFFFF;
    border: 1px solid #b7c8f6;
    /* left:548px; */
    /* top:140px; */
}

/* .show {
    width: 200px;
    height: 100px;
    overflow: auto;
    border: 1px #99bbe8 solid;
    background-color: #ffffff;
    float: right;
    margin-top: 3px;
} */

/* .message {
    position: absolute;
    top: 0px;
    left: 60px;
} */

/* .control {
    position: relative;
    width: 100%;
} */


/* .topology-context {
    overflow: auto;
    position: relative;
    background: #fff url(/jTopo_topology/static/jtopo/img/backimg.png);
} */

/********** 顶部工具栏 **********/
.toolbar-icon {
    /*padding-top: 20px;*/
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 10px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.56);
    cursor: pointer;
}

/********** 右键菜单 **********/
.menu-item {
    padding-left: 5px;
    width: 100%;
    font-size: 15px;
    height: 24px;
    line-height: 24px;
    text-align: left;
    border-bottom: 1px dotted #cccccc;
}

.menu-item span {
    margin-left: 5px;
    font-size: 16px;
}

/********** 节点悬浮信息 **********/
.node-infobox {
    font-size: 12px;
    width: 130px;
    border: 1px solid #dddddd;
    text-align: left;
    position: absolute;
    background-color: #ffffff;
    padding: 6px;
    box-shadow: 2px 2px 2px #888888, -1px -1px 2px #888888, 1px -1px 2px #888888, 1px 2px 2px #888888;
    z-index: 999;
    opacity: 0.8;
}

.node-infobox span {
    display: block;
    margin-bottom: 4px;
}

.node-infobox span label {
    margin-right: 4px;
    font-size: 12px;
}

/*下面是我自己写的*/
.jtopo-div{
	height: 100%;
	width: 100%;
	font-size: 12px;
	position: relative;
}
.jtopo-header{
	z-index: 9;
	height: 35px;
    color: #666!important;
	position: absolute;
	/* background-color: #eee!important;
	border-bottom: 1px solid rgb(211,214,219); */
}
.jtopo-title{
	z-index: 3;
	position: absolute;
	width: 100%;
	text-align: center;
	color: white;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 8vh;
	display: none;
}

.jtopo-tool{
	width: 32px;
	position: absolute;
	z-index: 7;
	top: 10%;
	left: 10px;
	border-radius: 25px;
	background-color: rgb(73,80,108);
	box-shadow: 5px 0px 10px 0px rgb(29,32,56);
}
.jtopo-tool-item{
	height: 60px;
	width: 18px;
	line-height: 60px;
	text-align: center;
	margin: 0 auto;
	border-top: 1px solid rgb(30,34,58);
	border-bottom: 1px solid rgb(117,122,143);
}

.jtopo-tool-item img{
	cursor: pointer;
}

.jtopo-nav{
	/*position: absolute;*/
	float: left;
    height: 100%;
    line-height: 40px;
    text-align: left;
    color: #cccccc;
    font-size: 12px;
    padding-left: 10px;
    margin: 0px;
}
.jtopo-tool-left{
	float: left;
}
.jtopo-tool-right{
	float: right;
}
.jtopo-search-input{
	display: inline-block;
	float: left;
	width: 150px;
	height: 25px;
	margin-top: 5px;
}
.jtopo-side-scroll{
	height: 100%;
	overflow: auto;
}
.jtopo-colla-title{
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px 0 35px;
    color: #333;
    background-color: #f2f2f2;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid rgb(211,214,219);
}
.jtopo-colla-title{
	margin: 0px;
	padding: 0px;
}
.jtopo-body{
	width: 100%;
	/* height: 100%; */
	padding: 0px;
	overflow: hidden;
	position: relative;
	/* border-left: 1px solid rgb(211,214,219); */
}
.topology-context{
	width: 100%;
	/* height: 100%; */
	/* position: relative; */
	background: #fff url(/dev/img/topo_backimg2.png);
}
#devtopo_tree{
	width: 200px;
	height: 250px;
	padding-top: 10px;
	position: absolute;
	top: -285px;
	left: 0px;
	z-index: 8;
	overflow: hidden;
	border: 1px solid rgb(211,214,219);
	background-color: white;
	transition: top 0.3s;
}
#devtopo_tree_group{
	height: 100%;
	width: 100%;
}
#lineStyle-set{
	position: absolute;
	top: 0px;
	right: -200px;
	width: 200px;
	height: 100%;
	z-index: 9;
	border: 1px solid rgb(211,214,219);
	background-color: white;
	transition: right 0.3s;
}
.stage-model-radio{
	vertical-align: middle;
	margin-top: 0px !important;
	cursor: pointer;
}
.stage-model-label{
	margin-top: 10px;
	margin-right: 5px;
	cursor: pointer;
}
#canvasModel{
	margin-right: 10px;
}
.topohelp-table-img{
	width: 100%;
	text-align: center;
}
.topohelp-table-img td{
	width: 12%;
}
.node-tooltip,.link-tooltip{
	position: absolute;
	z-index: 9;
	background-color: #FFFFFF;
	padding: 10px;
    border: 3px solid rgb(187, 214, 255);
    border-radius: 5px;
    display: none;
}
.node-tooltip table tr,.link-tooltip table tr{
	height: 27px;
}
.link-tooltip-split{
	border-top: 1px solid rgb(187, 214, 255);
}
